<template>
<div class="box pa-20">
    <!--  用户信息  -->
    <div class="user-info pa-20" @click="modifyInfo">
        <span>{{userName}}</span>
        <p>{{userTel}}</p>
        <van-icon name="arrow" />
    </div>
    <div class="pa-20 order-info">
        <!--   订单信息     -->
        <router-link to="" class="main-info">
            <i>
                <img :src="imgSrc">
            </i>
            <p class="multi-line">{{title}}</p>
            <div>
                <b>¥<strong>{{price}}</strong></b>
                <span>×{{quantity}}</span>
            </div>
        </router-link>
        <div class="order-num pa-l-r-20">
            <label>购买数量</label>
            <van-stepper v-model="quantity" />
        </div>
        <div class="total-box">
            共{{quantity}}件商品,合计: <span>¥</span><b>{{quantity*price}}</b>
        </div>
    </div>
    <div class="bottom-settlement pa-l-r-20">
        共{{quantity}}件商品<i>合计:</i> <span>¥<b>{{quantity*price}}</b></span><button>提交订单</button>
    </div>
</div>
</template>

<script>
    import img from '../../assets/temporary/ticketsImg.png';//图
    export default {
        name: "confirmOrder",
        data(){
            return{
                userName:"张小明",//用户姓名
                userTel:'15012345678',
                imgSrc : img,
                title: `郑州方特欢乐世界门票/大门票（电子票-出票超级快  成人票...`,
                price:325,
                quantity:1,//购物数量
            }
        },
        methods:{
            modifyInfo(){
                //确认单
                this.$router.push("/tickets/modifyInfo")
            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "@/assets/css/public";
    @import "@/assets/css/confirmOrder";
</style>
